<template>
    <div class="pageCon">
        <div class="title">长春广告可视化投放系统</div>

        <div class="shopDataBox">
            <div class="topTitle">各区店铺数量</div>
            <div class="shopTabList">
                <div v-for="(item, index) in shopDataList" :key="index">
                    <span>{{ item.areaName }}</span>
                    <span>{{ item.shopNum }}</span>
                </div>
            </div>
        </div>


        <div class="resDataBox">
            <div class="topTitle">剩余店铺数量</div>
            <div class="resDataCon">
                <div class="resItem" v-for="(item, index) in  resDataList " :key="index">
                    <div :class="`no_${index + 1}`">
                        <span>No.{{ index + 1 }}</span>
                        <span>{{ item.areaName }}</span>
                        <span>{{ item.shopUnAdvNum }}</span>
                    </div>
                    <el-progress :class="`progressLine progressLine_${index + 1}`" color="#83A5AA"
                        define-back-color="#0A383D" :show-text="false" :percentage="item.progress"
                        stroke-width="5"></el-progress>
                </div>
            </div>
        </div>

        <!-- 广告商投放比例-->
        <div class="shopAdvBox">
            <div class="topTitle">各区广告商数量</div>
            <div id="ShopAdvNumEcharts"></div>
        </div>

        <!-- 各区店铺投放状态-->
        <div class="shopAdvBox shopAdvBox1">
            <div class="topTitle">各区店铺投放状态</div>
            <div id="ShopAdvEcharts"></div>
        </div>

        <!-- 广告数量 -->
        <div class="advNumBox">
            <div class="topTitle">广告数量</div>
            <div>
                <div class="advInfoBox">
                    <span>共计 {{ advTotal }}家</span>
                    <span>广告商数量</span>
                </div>
                <span>总计</span>
            </div>
        </div>

        <!-- 店铺总数   已投放总数 -->
        <div class="shopInfoBox">
            <div>
                <div class="topTitle topTitle1">店铺总数</div>
                <div class="numBox">
                    <span>
                        共计{{ shopTotal }}家
                    </span>
                    <span class="rightNUm">
                        总计
                    </span>
                </div>
            </div>
            <div>
                <div class="topTitle topTitle2">已投放店铺数量</div>
                <div class="numBox">
                    <div class="lineBox">
                        <span>{{ shopAdvTotal }}家</span>

                        <div class="touLine">
                            <div class="inTouLine" :style="{ width: advShopProgress + '%' }"></div>
                        </div>
                        <span>占比 {{ advShopProgress }}%</span>

                    </div>
                    <span class="rightNUm rightNUmR">
                        {{ advShopProgress }}%
                    </span>
                </div>
            </div>
        </div>


        <!-- 地图区域 -->

        <div class="mapBox">
            <!-- <div class="mapBtnBox">
                <span @click="changeValue('shopNum')">店铺数量</span>
                <span @click="changeValue('shopAdvNum')">已投放广告店铺数量</span>
                <span @click="changeValue('shopUnAdvNum')">未投放广告店铺数量</span>
                <span @click="changeValue('advNum')">广告商数量</span>
            </div> -->
            <div id="mapEcharts"></div>
        </div>






        <!-- 
        '<div style="background-image: url(../../assets/data/tip.png);" >
            <div style="font-size: 18px;color: #fff;font-weight: bold;">'+params.name+'</div>
            <div>店铺总数：<span>'
                    + params.data.shopNum+'</span> </div>
            <div> 已投放广告店铺数：<span>'
                    +params.data.shopAdvNum+'</span> </div>
            <div>未投放广告店铺数：<span>'+params.data.shopUnAdvNum+'</span> </div>
            <div>该区域广告商数量：<span>'+params.data.advNum+'</span> </div>
        </div>' -->

    </div>
</template>
<script>

import * as echarts from "echarts";

import '../../utils/lib-flexible'


import { listMain } from '../../network/pc'
import { conditionList, mapDataList } from '../../utils/conditionList'
import { changchun } from '../../utils/changchun'
export default {
    name: 'couInfo',
    data() {
        return {
            mapDataList: mapDataList,  // 地图数据
            shopAdv: [],  //各个区域已投放广告的店铺数量
            shops: { //shops表示各个区域的门店数量
                title: '各区域店铺总数',
                seriesTitle: '店铺总数',
                idList: [],
                xData: [],  // 区域列表
                yData: [], // 区域对应的门店数量
                interval: 300
            },
            shopAdv: { //shopAdv各个区域已投放广告的店铺数量
                title: '各区域已投放广告店铺数量',
                seriesTitle: '店铺总数',
                idList: [],
                xData: [],  // 区域列表
                yData: [], // 区域对应的投放广告数量
                interval: 300
            },
            shopUnAdv: { //shopUnAdv  各区域未投放广告店铺数量
                title: '各区域未投放广告店铺数量',
                seriesTitle: '店铺总数',
                idList: [],
                xData: [],  // 区域列表
                yData: [], // 区域对应的投放广告数量
                interval: 100
            },
            ShopAdvNum: { //ShopAdvNum  各个区域广告商数量
                title: '各个区域广告商数量',
                idList: [],
                seriesTitle: '广告商总数',
                xData: [],  // 区域列表
                yData: [], // 区域对应的投放广告数量
                interval: 1
            },

            shopTotal: 0,//店铺总数
            shopAdvTotal: 0,// 已投放广告店铺总数
            advTotal: 0,//广告总数


            mapValueStr: 'shopNum',  // map 的 value 值
            visualMaxNum: 6000,//比例尺最高比例
            shopDataList: [],//各区域全部门店总数
            resDataList: [],// 各区域未投放门店总数
            advShopProgress: 0,// 投放广告店铺占比

        }
    },
    created() {
        this.getData()
    },
    mounted() {
    },
    methods: {

        changeValue(str) {
            this.mapValueStr = str
            this.visualMaxNum = str == 'advNum' ? 10 : 6000
            mapDataList.forEach((mIten, mIndex) => {
                mIten.value = mIten[this.mapValueStr]
            })
            console.log(mapDataList);

            this.mapEcharts(mapDataList, this.visualMaxNum)
        },

        getShopsEchart(echartsId, data) {
            var myChart = this.$echarts.init(document.getElementById(`${echartsId}`))
            var option = {

                //在容器中的位置
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '1%',
                    top: '8%',
                    containLabel: true
                },
                //悬浮卡片
                tooltip: {
                    trigger: 'axis',  //坐标轴触发
                    axisPointer: {
                        type: 'none'
                    },
                },
                xAxis: {
                    type: 'category',
                    data: data.xData,
                    axisLabel: {
                        show: true,
                        rotate: 40,//35度角倾斜显示
                        interval: 0,
                        fontSize: 12,
                        color: '#fff'
                    },
                    axisTick: {
                        show: false
                    },
                    //刻度相关配置：
                    axisTick: {
                        show: false,//去掉刻度
                    },
                    //轴线相关配置：
                    axisLine: {
                        show: false,  //去掉y轴的线
                    },
                },
                yAxis: {
                    type: 'value',
                    interval: data.interval,
                    axisLabel: {
                        show: true,
                        fontSize: 10,
                        color: '#fff'
                    },
                    //隐藏y轴的横线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            //这里输入线条的样式
                            color: '#2D3958',
                        }
                    },
                    splitNumber: 9,  //设置y轴的间隔
                    //刻度相关配置：
                    axisTick: {
                        show: false,//去掉刻度
                        alignWithLabel: true, //刻度和值居中对齐
                    },
                    //轴线相关配置：
                    axisLine: {
                        show: false,  //去掉y轴的线
                    },
                },
                series: [
                    {
                        name: data.seriesTitle,
                        data: data.yData,
                        type: 'bar',
                        barGap: '8%',  //设置柱子间隔
                        itemStyle: {
                            //设置渐变色
                            opacity: 1, //透明度0隐藏，1显示
                            // barBorderRadius: [25, 25, 0, 0], //顶部的圆角弧度
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#018AF4' }, //渐变上面
                                { offset: 1, color: 'rgba(77,105,231,0.02)' } //渐变下面
                            ])

                        },

                    }
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },


        getData() {

            listMain().then(res => {
                if (res.flag) {
                    console.log(res.data);
                    var shops = res.data.shops, shopAdv = res.data.shopAdv, shopUnAdv = res.data.shopUnAdv,
                        ShopAdvNum = res.data.ShopAdvNum, AdvNum = res.data.AdvNum;
                    this.shopTotal = 0
                    this.shopAdvTotal = 0
                    this.advTotal = AdvNum.length
                    // 门店总数列表

                    this.shopDataList = []


                    var list = conditionList[0].list;

                    console.log(conditionList);
                    conditionList[0].list.forEach(cItem => {
                        cItem.num = 0
                        shops.forEach(item => {
                            if (item.shopRegion == cItem.regionId) {
                                this.shops.idList.push(cItem.regionId)
                                this.shops.xData.push(cItem.text)
                                this.shops.yData.push(item.shopDayNum)

                                this.shopDataList.push({
                                    id: cItem.regionId,
                                    areaName: cItem.text,
                                    shopNum: item.shopDayNum,
                                })

                                this.shopTotal += item.shopDayNum
                            }
                        })
                        shopAdv.forEach((item, index) => {
                            if (item.shopRegion == cItem.regionId) {
                                this.shopAdv.idList.push(cItem.regionId)
                                this.shopAdv.xData.push(cItem.text)
                                this.shopAdv.yData.push(item.shopDayNum)

                                this.shopAdvTotal += item.shopDayNum
                            }
                        })
                        shopUnAdv.forEach(item => {
                            if (item.shopRegion == cItem.regionId) {
                                this.shopUnAdv.idList.push(cItem.regionId)
                                this.shopUnAdv.xData.push(cItem.text)
                                this.shopUnAdv.yData.push(item.shopDayNum)
                            }
                        })
                        ShopAdvNum.forEach(item => {
                            if (item.shopRegion == cItem.regionId) {
                                cItem.num++

                            }
                        })
                    })



                    this.advShopProgress = ((this.shopAdvTotal / this.shopTotal) * 100).toFixed(0)
                    console.log(this.advShopProgress);

                    console.log(list);


                    this.shopAdv.yData.forEach((ele, index) => {
                        this.shopDataList[index].shopAdvNum = ele
                        this.shopDataList[index].shopUnAdvNum = this.shopDataList[index].shopNum - ele
                        this.shopDataList[index].progress = (this.shopDataList[index].shopUnAdvNum / this.shopDataList[index].shopNum) * 100
                    })




                    list.forEach(ele => {
                        if (!this.shopUnAdv.xData.includes(ele.text)) {
                            this.shopUnAdv.idList.push(ele.regionId)
                            this.shopUnAdv.xData.push(ele.text)
                            this.shopUnAdv.yData.push(0)
                        }
                        console.log(this.shopUnAdv.xData.includes(ele.text));

                        this.ShopAdvNum.idList.push(ele.regionId)
                        this.ShopAdvNum.xData.push(ele.text)
                        this.ShopAdvNum.yData.push(ele.num)
                    })

                    console.log(this.shops);
                    console.log(this.shopAdv);
                    console.log(this.shopUnAdv);
                    console.log(this.ShopAdvNum);

                    console.log(this.shopTotal);
                    console.log(this.shopAdvTotal);
                    console.log(this.advTotal);



                    console.log(this.shopDataList);

                    this.shopDataList.sort((a, b) => {
                        return b.shopNum - a.shopNum
                    })

                    this.resDataList = JSON.parse(JSON.stringify(this.shopDataList))
                    this.resDataList.sort((a, b) => {
                        return b.shopUnAdvNum - a.shopUnAdvNum
                    })
                    console.log(this.resDataList);

                    console.log(this.shops.idList);
                    mapDataList.forEach((mIten, mIndex) => {
                        mIten.value = 0
                        mIten.shopNum = 0
                        mIten.shopAdvNum = 0
                        mIten.shopUnAdvNum = 0
                        mIten.advNum = 0
                        mIten.idList.forEach((idItem, idIndex) => {
                            mIten.shopNum += this.shops.yData[this.shops.idList.indexOf(idItem)]
                            mIten.shopAdvNum += this.shopAdv.yData[this.shopAdv.idList.indexOf(idItem)]
                            mIten.shopUnAdvNum += this.shopUnAdv.yData[this.shopUnAdv.idList.indexOf(idItem)]
                            mIten.advNum += this.ShopAdvNum.yData[this.ShopAdvNum.idList.indexOf(idItem)]
                        })
                        mIten.value = mIten[this.mapValueStr]
                    })

                    console.log(mapDataList);


                    console.log(this.ShopAdvNum);

                    //  各区域广告数量
                    this.getShopsEchart('ShopAdvNumEcharts', this.ShopAdvNum)
                    // 各区域广告投放店铺
                    this.getShopsLineEchart('ShopAdvEcharts', this.shopAdv)
                    // 地图
                    this.mapEcharts(mapDataList, this.visualMaxNum)

                }
            })
        },


        mapEcharts(data, visualMaxNum) {
            console.log(data);
            var mapChatDate = changchun;
            this.$echarts.registerMap('changchun', mapChatDate);
            var myChart = this.$echarts.init(document.getElementById('mapEcharts'));
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return '<div><div class="tipTopBox" >' + params.data.nameStr + '</div><div class="tipLinBox" >店铺总数：<span>' + params.data.shopNum + '</span>家</div><div class="tipLinBox tipLinBox2" > 已投放广告店铺数：<span>' + params.data.shopAdvNum + '</span>家</div><div class="tipLinBox tipLinBox3" >未投放广告店铺数：<span>' + params.data.shopUnAdvNum + '</span>家</div><div class="tipLinBox tipLinBox4" >该区域广告商数量：<span>' + params.data.advNum + '</span>家</div></div>';
                    },
                    textStyle: { color: "#fff" }, //提示标签字体颜色
                    className: 'tooltip_box',
                },
                visualMap: {
                    show: true,
                    bottom: 100,
                    right: 0,
                    text: ["多", "少"],
                    min: 0,
                    max: visualMaxNum,
                    precision: 0,
                    itemHeight: 100,
                    color: [
                        "rgba(1, 44, 111, 0.8)",
                        "rgba(1, 112, 169, 0.8)",
                    ],
                    textStyle: {
                        fontSize: 16,//字体大小
                        color: '#F2F9FF'//字体颜色
                    },
                    calculable: true, // 是否显示拖拽用的手柄 ，颜色深浅变化
                },

                series: [
                    {
                        type: 'map',
                        map: 'changchun',
                        roam: true,
                        itemStyle: {
                            normal: {
                                label: { show: true },
                                borderWidth: 2, //设置外层边框
                                borderColor: '"rgba(180, 209, 249, 0.8)",',
                            },
                            emphasis: {
                                label: { show: true, fontSize: 20, color: '#fff' }, // 悬浮时地区名称放大
                                borderWidth: 2,        // 悬停时的边框宽度
                                shadowBlur: 20,
                                shadowColor: "rgba(0, 0, 0, 0.2)",
                                borderColor: "#fff",
                                areaColor: "#048CFA",
                            }
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    color: '#fff'
                                }
                            }
                        },
                        data: data,
                    }
                ],
            }

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },

        getShopsLineEchart(echartsId, data) {
            var myChart = this.$echarts.init(document.getElementById(`${echartsId}`))
            var option = {
                //在容器中的位置
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '1%',
                    top: '8%',
                    containLabel: true
                },
                //悬浮卡片
                tooltip: {
                    trigger: 'axis',  //坐标轴触发
                    axisPointer: {
                        type: 'none'
                    },
                },
                xAxis: {
                    type: 'category',
                    data: data.xData,
                    axisLabel: {
                        show: true,
                        rotate: 40,//35度角倾斜显示
                        interval: 0,
                        fontSize: 12,
                        color: 'rgba(255, 255, 255, 0.46)'
                    },
                    axisTick: {
                        show: false
                    },
                    //刻度相关配置：
                    axisTick: {
                        show: false,//去掉刻度
                    },
                    //轴线相关配置：
                    axisLine: {
                        show: false,  //去掉y轴的线
                    },
                },
                yAxis: {
                    type: 'value',
                    interval: data.interval,
                    axisLabel: {
                        show: true,
                        fontSize: 10,
                        color: '#fff'
                    },
                    //隐藏y轴的横线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            //这里输入线条的样式
                            color: '#2D3958',
                        }
                    },
                    splitNumber: 9,  //设置y轴的间隔
                    //刻度相关配置：
                    axisTick: {
                        show: false,//去掉刻度
                        alignWithLabel: true, //刻度和值居中对齐
                    },
                    //轴线相关配置：
                    axisLine: {
                        show: false,  //去掉y轴的线
                    },
                },
                series: [
                    {
                        name: data.seriesTitle,
                        data: data.yData,
                        type: 'line',
                        areaStyle: {
                            normal: {
                                // color: 'linear-gradient(0deg, #018AF4, rgba(77,105,231,0.02))' //改变区域颜色
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0, color: '#40CFFF' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(77,105,231,0.02)' // 100% 处的颜色
                                }]
                                ),  //
                            }
                        },
                        smooth: true
                    }
                ],

            };

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
    }
}




</script>

<style lang="less" scoped>
:deep(.tooltip_box) {
    box-sizing: border-box !important;
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
    padding: .2708rem .2083rem !important;

    width: 2.5208rem;
    // height: 1.4583rem;
    background-image: url(../../assets/data/tip.png);
    background-size: 100% 100%;

    background-color: transparent;
}

:deep(.tooltip_box) .tipTopBox {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: .1875rem;
    color: #FFFFFF;
    line-height: .5208rem;
}

:deep(.tooltip_box) .tipLinBox {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .1354rem;
    color: #F7C824;
    line-height: .2083rem;
}

:deep(.tooltip_box) .tipLinBox>span {
    font-size: .2083rem
}

:deep(.tooltip_box) .tipLinBox2 {
    color: #03FBE2;
}

:deep(.tooltip_box) .tipLinBox3 {
    color: #28E2FF;
}

:deep(.tooltip_box) .tipLinBox4 {
    color: #F982B4;
}






// :deep(.tooltip_box)>div>span {
//     font-family: Source Han Sans CN;
//     font-weight: bold;
//     font-size: .125rem !important;
//     color: #FFFFFF;
//     line-height: .5208rem;
// }

.pageCon {
    position: relative;
    width: 100%;
    height: 11.25rem;
    background-image: url(../../assets/data/bg.png);
    background-size: 100% 100%;
    overflow: hidden;
}


.title {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 1%;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: .4688rem;
    color: #058BD2;
}

.shopDataBox {
    position: absolute;
    top: 1.0833rem;
    left: .5rem;
    width: 5.0417rem;
    height: 3.7292rem;
}

.topTitle {
    width: 100%;
    height: .4167rem;
    line-height: .4167rem;
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .2292rem;
    color: #F4F8FA;
}

.topTitle1 {
    position: relative;
    left: -0.1042rem;
}

.topTitle2 {
    position: relative;
    left: -0.1458rem;
}

.advInfoBox {
    position: relative;
    left: .5208rem;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: .2917rem;
    color: #D8E9FF;
    opacity: 0.9;
}

.advInfoBox>span:last-child {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .2292rem;
    color: rgba(255, 255, 255, 0.6);
    // background-color: #25E3FF;
}

.totalTip {
    top: 0rem !important;
    right: 0rem !important;
}

.shopTabList {
    position: absolute;
    top: 1.25rem;
    width: 100%;
    height: 2.2917rem;
    overflow-y: scroll;
    // background-color: rgba(225, 225, 225, .3);
}

.shopTabList::-webkit-scrollbar,
.resDataCon::-webkit-scrollbar {
    display: none;
}

.shopTabList>div {
    box-sizing: border-box;
    padding: 0 .5208rem 0 .2292rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 400;
    font-size: .1875rem;
    color: #FFFFFF;
    line-height: .3333rem;
}

.shopTabList>div>span:first-child {
    color: rgba(255, 255, 255, 0.46);
}

.resDataBox {
    position: absolute;
    bottom: .3958rem;
    left: .5rem;
    width: 5.0417rem;
    height: 5.9375rem;
    cursor: pointer;

}

.resDataCon {
    box-sizing: border-box;
    padding: .1458rem .25rem .25rem .2708rem;
    margin: 0 auto;
    width: calc(100% - .1458rem);
    height: calc(100% - .4167rem);
    // background-color: rgba(225, 225, 225, .3);
    overflow-y: scroll;

}

.resItem {
    width: 100%;
    // background-color: aqua;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .1667rem;
    color: #FFFFFF;
}

.resItem:not(:first-child) {
    margin-top: .2083rem;
}

.no_1>span:first-child,
.no_1>span:last-child {
    color: #25E3FF !important;
}

.no_2>span:first-child,
.no_2>span:last-child {
    color: #39FFC0 !important;
}

.no_3>span:first-child,
.no_3>span:last-child {
    color: #E5C327 !important;
}

.progressLine_1 /deep/ .el-progress-bar__inner {
    background-color: #25E3FF !important;
}

.progressLine_2 /deep/ .el-progress-bar__inner {
    background-color: #39FFC0 !important;
}

.progressLine_3 /deep/ .el-progress-bar__inner {
    background-color: #E5C327 !important;
}


.resItem>div:first-child {
    position: relative;
    display: flex;
    align-items: center;
}

.resItem>div:first-child>span:first-child {
    margin-right: .1875rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .1354rem;
    color: #C9D9DB;
    font-style: italic;
    // opacity: 0.5;

}

.resItem>div:first-child>span:last-child {
    position: absolute;
    right: 0rem;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: .1875rem;
    color: #C9D9DB;
}

.progressLine {
    margin-top: .0625rem;
}



.shopAdvBox {
    position: absolute;
    top: 1.1042rem;
    right: .4583rem;
    width: 5.0417rem;
    height: 3.7292rem;
    cursor: pointer;
}

.shopAdvBox1 {
    top: 4.9375rem;
}

#ShopAdvNumEcharts {
    width: 4.9063rem;
    height: 3.2604rem;
    // background: linear-gradient(0deg, rgba(1, 138, 244, 0.21), rgba(77, 105, 231, 0));
}

#ShopAdvEcharts {
    width: 4.9063rem;
    height: 3.2604rem;
    // background: linear-gradient(0deg, rgba(1, 138, 244, 0.21), rgba(77, 105, 231, 0));
}

.advNumBox {
    position: absolute;
    top: 8.7917rem;
    right: .4583rem;
    width: 5.0417rem;
    height: 2.0521rem;
    cursor: pointer;
}

.advNumBox>div:last-child {
    position: relative;
    width: 4.9063rem;
    height: 1.5833rem;
    background: linear-gradient(0deg, rgba(1, 138, 244, 0.21), rgba(77, 105, 231, 0));
    font-weight: bold;
    font-size: .2708rem;
    color: #D8E9FF;
    opacity: 0.9;
}

.advNumBox>div:last-child>span {
    position: absolute;
    top: .5833rem;
    right: .8333rem;
    font-weight: bold;
    font-size: .2708rem;
    color: #D8E9FF;
    opacity: 0.9;
}



.shopInfoBox {
    display: flex;
    align-items: center;
    position: absolute;
    top: 8.7917rem;
    left: 5.6875rem;
    width: 8.6146rem;
    height: 2.0521rem;
    cursor: pointer;
}

.shopInfoBox>div {
    position: relative;
    flex: 1;
    height: 100%;
}

.shopInfoBox>div>div:last-child {
    position: relative;
    width: 100;
    height: calc(100% - .4167rem);
    font-weight: bold;
    font-size: .2708rem;
    color: #D8E9FF;
    opacity: 0.9;
    // background-color: #058BD2;
    overflow: hidden;
}

.shopInfoBox>div>div:last-child>span:first-child {
    position: absolute !important;
    top: .5833rem !important;
    left: .7292rem !important;
    word-break: keep-all;
}

.numBox>span {
    word-break: keep-all;
}

.rightNUm {
    position: absolute !important;
    top: .6042rem !important;
    right: .4375rem;

    word-break: keep-all;
    width: 1.0417rem;
    text-align: center;

}

.rightNUmR {
    width: 1.0417rem;
    // top: .375rem !important;
    right: .7604rem !important;
    text-align: center;
}

.lineBox {
    position: relative;
    left: .1042rem;
    margin-top: .25rem;
    width: 100%;
    height: calc(100% - .4167rem);
    // background-color: #25E3FF;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .2292rem;
    color: #FFFFFF;
    opacity: 0.9;

}


.lineBox>span:last-child {
    color: rgba(255, 255, 255, 0.6);
}

.touLine {
    margin: .1667rem 0 .0833rem;
    position: relative;
    width: 1.6667rem;
    height: .2708rem;
    background: linear-gradient(90deg, rgba(85, 118, 195, 0.3), rgba(46, 88, 207, 0.3));
    // opacity: 0.3;
}

.inTouLine {
    width: .6042rem;
    height: .2708rem;
    background: linear-gradient(90deg, rgba(135, 192, 255, 0.96), rgba(156, 200, 253, 0.96), rgba(111, 150, 255, 0.96));
}

.echartsBox {
    display: inline-block;
    width: 4.1667rem;
    height: 4.1667rem;
    border: .0104rem solid #333;
    background-color: #476bce;
}

#mapEcharts {
    width: 100% !important;
    height: 100% !important;
    // transform: rotateX(2deg);
}

.mapBox {
    position: absolute;
    top: 2.0625rem;
    left: 6.8333rem;
    width: 6.1354rem;
    height: 5.9792rem;
    opacity: 0.8;
    // transform-style: preserve-3d;
    // perspective: 1.0417rem;
}

.mapBtnBox {
    position: absolute;
    top: .1042rem;
    z-index: 20;
}

.mapBtnBox>span {
    display: inline-block;
    margin: .1042rem;
    padding: .0417rem .0625rem;
    border-radius: .1042rem;
    background-color: aqua;
    color: #fff;
    cursor: pointer;


}

.a {
    color: #2d5fe9bb;
}
</style>